<template>
	<view class="uploaded" v-if="url">
		<image class="uploaded_photo" :src="url"></image>
		<view class="delete" @tap="$emit('updateURL', '')">
			<image class="icon" src="/static/images/company/delete.png"></image>
		</view>
	</view>
	<view class="upload" v-else>
		<view class="box" @tap="gotoGetPhoto('query')">
			<image class="action" src="/static/images/register/camera.png" />
		</view>
		<view class="box masking">
			<image class="example" :src="example" mode="aspectFill" @tap="preview(example)" />
			<view class="title">{{ tipText }}</view>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			tipText: {
				type: String,
				default: ''
			},
			url: {
				type: String,
				default: ''
			},
			example: {
				type: String,			
				default: '/static/images/register/photo.png'
			},
		},
		methods: {
			preview(exampleURL) { // 将参数路径中图片在微信进行预览
				uni.previewImage({
					current: exampleURL, // 当前显示图片的http链接
					urls: [exampleURL] // 需要预览的图片http链接列表
				})
			},	
			gotoGetPhoto(type, index) { // 根据选择的方式前往拍照或者选择图片
				let _this = this
				if (type === 'create') {} else if (type === 'query') {
					uni.chooseImage({

						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success(res) {
							// tempFilePath可以作为img标签的src属性显示图片
							const tempFilePaths = res.tempFilePaths
							if (tempFilePaths && tempFilePaths.length) {
								var ossServerUrl = 'https://request.zxlscm.com/zxlmp/web/upload';//http://dev.api.daruiyun.com:18889/zxlmp  //'https://' + subCustomerInfo.ossBucketName + '.oss-cn-beijing.aliyuncs.com/'
								uni.uploadFile({
									url: ossServerUrl,
									filePath: tempFilePaths[0],
									name: 'file',
									header:{
										'sysName':'zxlmp',
										'clientId':'client.wx.microapp',
										'instanceId':'zxl',
										'Content-Type':'application/x-www-form-urlencoded',
										'Cookie' : 'SESSION=' + uni.getStorageSync('sessionId'),
									},	
																	
									success: function(res) {
										console.log('chooseImage success, temp path is: ', res.data.data)
										console.log('res: ', res	)
										
										if (res.statusCode === 200) {
											console.log('chooseImage success, temp path is: ', JSON.parse(res.data).data.imgUrl)											
											_this.$emit('updateURL', JSON.parse(res.data).data, index)
											uni.showToast({
												title: '上传成功',
												icon: 'success',
												duration: 2000
											})
										} else {
											uni.showToast({
												title: '上传失败',
												duration: 1000
											})
										}
									},
									fail: function({
										errMsg
									}) {
										console.log('upladImage fail, errMsg is: ', errMsg)
										uni.showToast({
											title: '上传失败',
											duration: 1000
										})
									}
								})
							} else {
								uni.showToast({
									title: '图片获取失败，API返回参数格式有误',
									duration: 1000
								})
								console.log('错误信息', res)
							}
						}
					})
				}
			}
		},
	}
</script>

<style>
	.upload {
		position: relative;
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 25upx;
	}

	.upload .box {
		width: 288upx;
		height: 154upx;
		border: 2upx solid #BBBBBB;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.box .action {
		width: 84upx;
		height: 88upx;
	}

	.box .title {
		z-index: 2;
		position: absolute;
		left: 0upx;
		right: 0upx;
		bottom: 0upx;
		background-color: rgba(0, 0, 0, 0.5);
		height: 39upx;
		font-size: 24upx;
		line-height: 39upx;
		color: white;
		text-align: center;
	}

	.upload .masking {
		background: #EFEFEF;
		position: relative;
		padding: 1upx;
		padding-bottom: 39upx;
		overflow: hidden;
	}

	.masking .example {
		width: 288upx;
		height: 154upx;
	}


	.uploaded {
		position: relative;
		margin-top: 25upx;
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: center;
	}

	.uploaded .uploaded_photo {
		width: 627upx;
		height: 314upx;
	}

	.uploaded .delete {
		margin-left: -54upx;
		position: relative;
		width: 54upx;
		height: 54upx;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.uploaded .delete .icon {
		height: 32upx;
		width: 32upx;
	}
</style>
